<template>
	<view class="content bg-light" style="height: 100%;min-height: 700px;">
		<!-- 顶部标题组件 -->
		<tabsTop :tabName="text"></tabsTop>
		<!-- 搜索框 -->
		<!-- <view class="search">
			<mySearch class="searchClick" @click="searchClick()"></mySearch>
		</view> -->
		<!-- tab栏 -->
		<view class="tab-bar flex mt-2 bg-white" style="justify-content: space-around;height: 40px;line-height: 40px;">
			<view v-for="(item, index) in tabs" :key="index" class="tab-item flex-1 text-center"
				style="font-size: 14px;color: #333;cursor: pointer;height: 40px;"
				:class="{ active: activeTab === index }" @click="changeTab(index)">
				{{ item }}
			</view>
			<view class="tab-indicator" :style="{ left: leftPosition, width: tabWidth }"></view>
		</view>
		<!-- 订单 -->
		<view class="order-list" style="min-height: 450px;">
			<view class="order-item" v-if="orders.length > 0">
				<view v-for="(item,index) in orders" :key="index" class="p-2 m-2 bg-white rounded-lg">
					<!-- 商店名和交易状态 -->
					<view class="flex justify-between align-center">
						<view class="flex" style="line-height: 2.8;">
							<view style="font-size: 14px;">小康龙江</view>
							<uni-icons type="right" size="15" class="flex align-center"></uni-icons>
						</view>
						<view style="font-size: 14px;">
							{{getRowStatus(item.Row_Status)}}
						</view>
					</view>
					<!-- 商品图、商品信息、价格、数量 -->
					<view v-for="(product, pIndex) in item.children" :key="pIndex" class="flex justify-between mt-1"
						@click="goOrderD(index)">
						<image :src="Domain_IMG+product.Picture_URL" style="width: 104rpx;height: 102rpx;"
							class="rounded-lg">
						</image>
						<view class="flex justify-between" style="width: 82%;">
							<view>
								<view style="font-size: 13px;">{{product.Article_Name}}</view>
								<view class="mt-1" style="color: #f49c0c;font-size: 10px;">{{isSevendays}}
								</view>
							</view>
							<view>
								<view style="font-size: 13px;">￥{{product.Sales_Unit_Price}}</view>
								<view class="mt-1" style="font-size: 10px;text-align-last: end;">
									&times;{{product.Quantity}}
								</view>
								<view v-if="product.Refund_Type == '1'" class="text-danger" style="font-size: 10px;">退款审核</view>
								<view v-else-if="product.Row_Status == '4'" class="text-success" style="font-size: 10px;">退款成功</view>
							</view>
							<view class="flex">
								<button v-if="item.children.length > 1" v-for="(product, pIndex) in item.children"
									:key="pIndex" @click="goSubOrder(index, pIndex)">商品{{pIndex + 1}}再来一单</button>
							</view>
						</view>
					</view>
					<!-- 优惠、应付 -->
					<view class="flex justify-end" style="font-size: 12px;">
						<!-- <view class="">优惠 ￥{{item.preferential}}&comma;</view> -->
						<view>应付款 ￥{{item.Sales_Amount}}</view>
					</view>
					<!-- 删除订单、再来一单或订单状态 -->
					<view v-if="item.Row_Status == '0'" class="flex justify-end">
						<button @click="cancelOrder(index)">取消订单</button>
						<button @click="goOrderD(index)">立即付款</button>
					</view>
					<view v-else class="flex justify-end">
						<button v-if="item.Row_Status != '1'" @click="showDeleteConfirm(index)">删除订单</button>
						<view class="flex justify-end" v-if="item.children.length === 1" style="font-size: 12px;">
							<button @click="goSubOrder(index)">再来一单</button>
						</view>
					</view>
					<view v-if="showDeleteConfirmDialog" class="dialog">
						<view class="bg-white" style="width:80%;height:150px;">
							<view class="dialog-header text-center m-2">确定删除订单？</view>
							<view class="dialog-content">
								<view class="p-2 text-center">删除订单后无法恢复，无法处理您的售后问题，请慎重考虑。</view>
							</view>
							<view class="dialog-footer">
								<button class="btn-cancel" @click="hideDeleteConfirm">取消</button>
								<button class="btn-delete" @click="deleteOrderConfirm">删除</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="noOrders">暂无订单</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor></botSponsor>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getOrders,
		getOneOrder,
		getCancelOrder
	} from '@/api/orders.js';
	import {
		getDeleteAction
	} from '@/api/global.js'
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import mySearch from "@/components/mysearch/mysearch.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	export default {
		components: {
			tabsTop, //顶部标题组件
			tabsBottom, //底部tab组件
			mySearch, // 搜索组件
			botSponsor // 底部赞助商
		},
		data() {
			return {
				tabs: ["全部", "待付款", "待发货", "待收货", "待评价"], // tab选项
				activeTab: 0, // 当前选中的tab索引，默认为全部订单
				text: '',
				orders: [],
				product_info: '永富蔓小仙蔓越莓银耳鲜炖180g*6瓶',
				form: {
					page: 1,
					limit: 10,
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Row_Status: '',
					Article_Name: '',
				},
				isSevendays: '七天无理由退货',
				Domain_IMG: app.globalData.Domain_IMG,
				showDeleteConfirmDialog: false, // 是否显示删除订单确认弹出框
				deleteIndex: -1, // 待删除订单的索引
				selectShopCar: [],
			}
		},
		computed: {
			leftPosition() {
				return `calc(${this.activeTab * (100 / this.tabs.length)}% + 5%)`; // 设置 left 样式，初始值为 5%
			},
			tabWidth() {
				return `calc(50% / ${this.tabs.length})`; // 设置选项卡宽度
			}
		},
		onLoad(options) {
			const text = decodeURIComponent(options.text)
			this.text = text
			// 根据传递的参数判断应该跳转到哪个选项卡
			switch (text) {
				case '待付款':
					this.activeTab = 1;
					this.form.Row_Status = 0;
					break;
				case '待发货':
					this.activeTab = 2;
					this.form.Row_Status = 1;
					break;
				case '待收货':
					this.activeTab = 3;
					this.form.Row_Status = 6;
					break;
				case '待评价':
					this.activeTab = 4;
					this.form.Row_Status = 10;
					break;
				default:
					this.activeTab = 0; // 默认为全部订单
					this.form.Row_Status = '';
					break;
			}
			this.getData(this.form)
		},
		methods: {
			async changeTab(index) {
				this.activeTab = index;
				switch (index) {
					case 1:
						this.form.Row_Status = 0;
						break;
					case 2:
						this.form.Row_Status = 1;
						break;
					case 3:
						this.form.Row_Status = 6;
						break;
					case 4:
						this.form.Row_Status = 10;
						break;
					default:
						this.form.Row_Status = '';
						break;
				}
				this.getData(this.form);
			},
			searchClick() {
				// 搜索框点击事件
			},
			async cancelOrder(index) {
				console.log('333', this.orders);
				this.loading = true;
				const res = await getCancelOrder({
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Open_ID: app.globalData.Open_ID,
					Collection_SerialNumber: this.orders[index].Collection_SerialNumber
				})
				if (res.Status == "success") {
					uni.showToast({
						title: '取消成功！',
						icon: 'success'
					})
					this.getData(this.form);
				} else {
					uni.showToast({
						title: '取消失败！',
						icon: 'error'
					})
				}
				this.loading = false;
			},
			// payOrder(index) {
			// 	uni.navigateTo({
			// 		url: `/pages/my/orderDetails?order=${encodeURIComponent(JSON.stringify(this.orders[orderIndex]))}`
			// 	});
			// },
			goOrderD(orderIndex) {
				uni.navigateTo({
					url: `/pages/my/orderDetails?order=${encodeURIComponent(JSON.stringify(this.orders[orderIndex]))}`
				});
			},
			async getData(form) {
				const res = await getOrders(form)
				console.log('111', res);
				this.orders = res.tableData;
				console.log('orders', this.orders);
			},
			getRowStatus(status) {
				switch (status) {
					case '0':
						return "等待买家付款";
					case '1':
						return "买家已付款";
					case '3':
						return "交易关闭";
					case '4':
						return "已退款";
					case '6':
						return "发货中";
					case '7':
						return "已送达";
					case '8':
						return "购物车";
					case '9':
						return "待发货";
					default:
						return "";
				}
			},
			getRefundSta(status) {
				switch (status) {
					case '0':
						return "退款中";
					default:
						return "";
				}
			},
			// 显示删除订单确认弹出框
			showDeleteConfirm(index) {
				this.showDeleteConfirmDialog = true;
				this.deleteIndex = index;
			},
			// 隐藏删除订单确认弹出框
			hideDeleteConfirm() {
				this.showDeleteConfirmDialog = false;
			},
			// 确认删除订单
			async deleteOrderConfirm() {
				const res = await getDeleteAction({
					Open_ID: app.globalData.Open_ID,
					TableName: 'collection',
					Primary_Key_Name: 'Collection_SerialNumber',
					Primary_Key: this.orders[this.deleteIndex].Collection_SerialNumber,
					Row_Status: '10',
				})
				if (res.Status == "success") {
					this.hideDeleteConfirm();
					console.log('this.orders', this.orders);
					await this.getData(this.form);
				}
				console.log(res);
			},
			async goSubOrder(index) {
				console.log('order', this.orders);
				console.log('this.orders[index].children[0].Sales_Unit_Price_Stock_SerialNumber', this.orders[index]
					.children[0].Sales_Unit_Price_Stock_SerialNumber);
				const res = await getOneOrder({
					Sales_Unit_Price_Stock_SerialNumber: this.orders[index].children[0]
						.Sales_Unit_Price_Stock_SerialNumber
				})
				if (res.Status == "success") {
					console.log('res.Data[0]', res.Data);
					var good = JSON.stringify(res.Data)
					uni.navigateTo({
						url: '/pages/index/submitOrder?good=' + good
					})
				}
				// console.log(res);
			}
		}
	}
</script>

<style>
	.tab-item.active {
		color: #00bfff;
	}

	.tab-indicator {
		position: absolute;
		top: 109px;
		left: 0;
		height: 4px;
		background-color: #00bfff;
		transition: left 0.3s;
	}

	button {
		margin: 5px;
		padding: 0px;
		font-size: 11px;
		height: 28px;
		width: 63px;
		border-radius: 12px;
		text-align: center;
		margin-top: 12px;
		background-color: transparent;
	}

	.noOrders {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #d6d9db;
	}

	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
	}

	.dialog-header {
		font-size: 14px;
	}

	.dialog-content {
		font-size: 12px;
	}

	.dialog-footer {
		display: flex;
		justify-content: center;
	}

	.btn-cancel,
	.btn-delete {
		border-radius: 4px;
		cursor: pointer;
	}

	.btn-cancel {
		background-color: #eaeaea;
	}

	.btn-delete {
		background-color: #ff4e4e;
		color: #fff;
	}
</style>